.#{$theme-name} {
  .esriSimpleSliderTL {
    top: 15px;
    left: 15px;
  }
  .esriSimpleSliderTR {
    top: 15px;
    right: 15px;
  }
  .esriSimpleSliderBL {
    bottom: 35px;
    left: 15px;
  }
  .esriSimpleSliderBR {
    bottom: 40px;
    right: 15px;
  }
  // Base styles
  // --------------------------------------------------
  .esriSimpleSlider {
    text-align: center;
    border: none;
    background-color: transparent;
    @include border-radius($zoomslider-border-radius);
    @include calcite-box-shadow-base;
    span {
      display: none; // Hide default symbols: "+", "-"
    }
    // Increment/Decrement Buttons
    div {
      width: $esri-btn-width;
      height: $esri-btn-height;
      border-width: 0;
      border-style: none;
      @include button-variant($btn-default-color, $btn-default-bg);
      @include user-select(none);
      @include box-sizing(border-box);
      cursor: pointer;
      @include dijit-icons;
      font-size: $icon-size-base;
      line-height: $esri-btn-height / $icon-size-base;
    }
    .esriSimpleSliderIncrementButton {
      @include border-radius($zoomslider-border-radius $zoomslider-border-radius 0 0);
      &:before {
        content: "\e620";
      }
    }
    .esriSimpleSliderDecrementButton {
      @include border-radius(0 0 $zoomslider-border-radius $zoomslider-border-radius);
      &,
      &:hover,
      &:focus {
        border-top: 0;
      }
      &:before {
        content: "\e621";
      }
    }
  }
  .esriSimpleSliderDisabledButton {
    &,
    &:hover,
    &:active {
      cursor: false;
      pointer-events: none;
      @include opacity($disabled-opacity);
    }
  }
  // Vertical
  // --------------------------------------------------
  .esriSimpleSliderVertical {
    .esriSimpleSliderIncrementButton {
      border-bottom: 1px solid $zoomslider-divider-bg;
    }
  }
  // Horizontal
  // --------------------------------------------------
  .esriSimpleSliderHorizontal {
    &.esriSimpleSliderBL {
      left: 5px;
    }
    &.esriSimpleSliderBR {
      right: 5px;
    }
    .esriSimpleSliderIncrementButton {
      float: right;
      border-left: 1px solid $zoomslider-divider-bg;
      @include border-radius(0 $zoomslider-border-radius $zoomslider-border-radius 0);
    }
    .esriSimpleSliderDecrementButton {
      float: left;
      @include border-radius($zoomslider-border-radius 0 0 $zoomslider-border-radius);
    }
    .esriSimpleSliderIncrementButton.dj_ie67Fix {
      float: none;
      text-align: center;
    }
  }
}

